{extend name="public/pure"/}
{block name="style"}
<link rel="stylesheet" href="__PUBLIC__/css/order.css">
<style type="text/css">
    .product-image-box li, .store-image-select li{width: 100px; text-align: center; border: 1px #ccc solid; float: left; margin-right: 10px; margin-bottom: 10px; cursor:pointer;padding: 8px;}
    .product-image-box li p, .store-image-select li p{margin-top: 10px;}
    .active-li{border-color: red !important;}
    #product-sotre-data .store-image{cursor:pointer;}
    #product-sotre-data thead{text-align: center;}
    #product-sotre-data thead span{margin-right: 5px;}
    #product-purchase-data thead{text-align: center;}
    #attr-template label{cursor:pointer;}
    #attr-template li{margin-bottom: 5px;}
</style>
{/block}
{block name="content"}
<div class="layui-row">
    <form class="layui-form" method="post" id="product-form" lay-filter="product-form">
        {if isset($product)}<input type="hidden" name="product.product_id" value="{$product.product_id}">{/if}
        <div class="layui-tab" lay-filter="address">
            <ul class="layui-tab-title">
                <li class="layui-this">商品信息</li>
                <li>采购信息</li>
            </ul>
            <div class="layui-tab-content edit-order-data">
                <!-- 基础信息 -->
                <div class="layui-tab-item layui-show">
                    <div class="layui-row product-base">
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label xrequired">品牌</label>
                                <div class="layui-input-block">
                                    <select name="product.brand" lay-search lay-reqText="品牌必选" lay-verify="required">
                                        <option value="">请选择</option>
                                        {foreach $brand as $b}
                                        <option {if isset($product) && $product.brand == $b.brand_id}selected{/if} value="{$b.brand_id}">{$b->name_ch}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">计量单位</label>
                                <div class="layui-input-block">
                                    <select name="product.unit_id" lay-search>
                                        <option value="">请选择</option>
                                        {foreach $unit as $u}
                                        <option {if isset($product) && $product.unit_id == $u.unit_id}selected{/if} value="{$u.unit_id}">{$u.name_ch}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label xrequired">分类</label>
                                <div class="layui-input-block">
                                    <input type="text" id="product-category-id" {if isset($product)}data-cate-name="{$product.category.name}" value="{$product.category_id}"{/if} name="product.category_id" lay-reqText="分类必选" lay-verify="required" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label xrequired">SPU</label>
                                <div class="layui-input-block">
                                    <input type="text" id="product-spu" lay-verify="required" lay-reqText="SPU必填" {if isset($product)}readonly value="{$product.spu}"{/if} name="product.spu" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label xrequired">中文名称</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.name_ch}"{/if} lay-verify="required" lay-reqText="中文名称必填" value=""name="product.name_ch" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">英文名称</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.name_en}"{/if} name="product.name_en" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">申报中文名</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.declare_ch}"{/if} name="product.declare_ch" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">申报英文名</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.declare_en}"{/if} name="product.declare_en" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">申报价格</label>
                                <div class="layui-input-block">
                                    <input type="text" placeholder="美金" {if isset($product)}value="{$product.declare_price|abs}"{/if} name="product.declare_price" class="layui-input" lay-verify="emptyNumber">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">海关编码</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.hs_code}"{/if} name="product.hs_code" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">型号</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.model}"{/if} name="product.model" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <input type="text" {if isset($product)}value="{$product.remark}"{/if} name="product.remark" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs8">
                                <label class="layui-form-label">关键词</label>
                                <div class="layui-input-block">
                                    <div id="product-tag"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs8">
                                <label class="layui-form-label">商品状态</label>
                                <div class="layui-input-block">
                                    {foreach $status as $k => $s}
                                    <input type="radio" {if !isset($product) && $k == \app\common\model\Product::STATUS_Y}checked{/if} {if isset($product) && $product.status == $k}checked{/if} name="product.status" value="{$k}" title="{$s}">
                                    {/foreach}
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">仓库</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" lay-filter="warehouse-all" title="全部" lay-skin="primary"/>
                                    {php}
                                    $wids = [];
                                    if(isset($product))
                                    {
                                    foreach($product->stocks as $s)
                                    if(!in_array($s->warehouse_id, $wids)) $wids[] = $s->warehouse_id;
                                    }
                                    {/php}
                                    {foreach $warehouse as $w}
                                    <input type="checkbox" {if in_array($w.warehouse_id, $wids)}checked{/if} class="warehouse-id" name="stock.warehouse_id[]" value="{$w.warehouse_id}" title="{$w.name}" lay-skin="primary">
                                    {/foreach}
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-col-xs4">
                                <label class="layui-form-label">商品热度</label>
                                <div id="product-rate"></div>
                                <input id="product-hot" type="hidden" name="product.hot"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">描述信息</label>
                            <div class="layui-input-block">
                                <textarea name="product.describe" placeholder="请输入内容" class="layui-textarea">{if isset($product)}{$product.describe}{/if}</textarea>
                            </div>
                        </div>
                    <div class="layui-row product-image" style="margin: 50px 0px;">
                        <hr/>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label xrequired" style="line-height: 125px;">上传图片</label>
                            <button type="button" class="layui-btn layui-btn-sm image-local"><i class="layui-icon"></i>本地图片</button>
                            <button type="button" class="layui-btn layui-btn-sm image-net"><i class="layui-icon"></i>网络图片</button><br/>
                            {php}
                                if(isset($product)){
                                    $images = $product->images->toArray();
                                    $images = array_column($images, 'image_url');
                                }
                            {/php}
                            <input type="hidden" {if isset($images)}value="{$images|join=','}"{/if} name="image.images" id="product-images" lay-verify="required" lay-reqText="图片必须上传">
                            <input type="hidden" id="product-image-url" {if isset($product)}value="{$product.image_url}"{/if} name="product.image_url">
                            <div class="layui-upload-drag" id="product-upload-image">
                                <i class="layui-icon"></i>
                                <p>点击传本地图片，或拖拽到此处</p>
                            </div>
                        </div>
                        <div class="layui-col-xs8">
                            <ul class="product-image-box">
                                <li class="no-photo">
                                    <img width="100px;" src="__PUBLIC__/img/no-photo.png">
                                    <p>100x100</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-row product-store">
                        <div class="layui-row">
                            <span style="margin-right: 10px;">商品属性:</span>
                            <div class="layui-btn-group">
                                {php}$prev=null;$sptemp=[];{/php}
                                {foreach $spec as $s}
                                {php}$sptem[$s['type']][]=$s;{/php}
                                {if $s.type != $prev}
                                {php}$prev=$s['type'];if($prev == 'color')continue;{/php}
                                <button type="button" style="margin-right: 5px !important;" class="layui-btn layui-btn-sm product-attr-select" item="{$s.type}">{$s.name_ch}</button>
                                {/if}
                                {/foreach}
                                {php}
                                    if(isset($product) && !empty($product->attrs) && !$product->attrs->isEmpty())
                                        $attrs = json_encode(array_column($product->attrs->toArray(), 'spec_id'));
                                {/php}
                                <button type="button" {if isset($attrs)}data-data='{$attrs}'{/if} class="layui-btn layui-btn-sm layui-btn-normal layui-hide product-attr-generate">生成变体</button>
                                {foreach $sptem as $k=>$s}
                                <span class="attr-{$k} layui-hide">{$s|json_encode}</span>
                                {/foreach}
                            </div>
                            <input type="hidden" id="product-attr-value" name="attr.values" />
                        </div>
                        <table class="layui-table" id="product-sotre-data" lay-filter="product-sotre-data">
                            <thead>
                            <tr>
                                <td width="120"><span>图片</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm image">应用所有</button></td>
                                <td width="120"><span>sku</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm auto">自动生成</button></td>
                                <td><span>属性</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>颜色</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>长(mm)</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>宽(mm)</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>高(mm)</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>净重(g)</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>包装重(g)</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                {if !isset($product)}
                                <td><span>现有库存</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                {/if}
                                <td><span>采购价格</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td><span>备注</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm store-all">应用所有</button></td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            {if isset($product)}
                            {foreach $product.stores as $store}
                                <tr>
                                    <td>
                                        <img class="store-image" width="100px;" src="{$store.image_url?:'__PUBLIC__/img/no-photo.png'}"/>
                                        <input type="hidden" name="store.image_url[]" value="{$store.image_url}"/>
                                    </td>
                                    <td>
                                        <span class="copy-text">{$store.sku}</span>
                                        <input type="hidden" value="{$store.sku}" class="layui-input store-sku" name="store.sku[]">
                                    </td>
                                    <td><input type="text" value="{$store.attr}" class="layui-input store-attr" name="store.attr[]"></td>
                                    <td><input type="text" value="{$store.color}" class="layui-input store-color" name="store.color[]"></td>
                                    <td><input type="text" value="{$store.length}" class="layui-input" name="store.length[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.width}" class="layui-input" name="store.width[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.height}" class="layui-input" name="store.height[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.weight}" class="layui-input" name="store.weight[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.package_weight}" class="layui-input" name="store.package_weight[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.price}" class="layui-input" name="store.price[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" value="{$store.remark}" class="layui-input" name="store.remark[]"></td>
                                    <td>
                                        <button type="button" class="layui-btn layui-btn-xs product-store-add">添加</button><br/>
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-store-clear">清空</button><br/>
                                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-store-del">删除</button>
                                    </td>
                                    <input type="hidden" name="store.store_id[]" value="{$store.store_id}"/>
                                </tr>
                            {/foreach}
                            {else}
                                <tr>
                                    <td>
                                        <img class="store-image" width="100px;" src="__PUBLIC__/img/no-photo.png">
                                        <input type="hidden" name="store.image_url[]" value="">
                                    </td>
                                    <td><input type="text" class="layui-input store-sku" name="store.sku[]" lay-verify="required" lay-reqText="SKU不能为空"></td>
                                    <td><input type="text" class="layui-input store-attr" name="store.attr[]"></td>
                                    <td><input type="text" class="layui-input store-color" name="store.color[]"></td>
                                    <td><input type="text" class="layui-input" name="store.length[]"></td>
                                    <td><input type="text" class="layui-input" name="store.width[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="store.height[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="store.weight[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="store.package_weight[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="stock.stock[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="store.price[]" lay-verify="emptyNumber"></td>
                                    <td><input type="text" class="layui-input" name="store.remark[]"></td>
                                    <td>
                                        <button type="button" class="layui-btn layui-btn-xs product-store-add">添加</button><br/>
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-store-clear">清空</button><br/>
                                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-store-del">删除</button>
                                    </td>
                                </tr>
                            {/if}
                            </tbody>
                        </table>
                    </div>
                </div>
                </div>
                <!-- 采购信息 -->
                <div class="layui-tab-item">
                    <table class="layui-table" id="product-purchase-data" lay-filter="product-purchase-data">
                        <thead>
                        <tr>
                            <td width="120"><span>供应商</span></td>
                            <td width="80"><span>采购类型</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="80"><span>优先采购</span></td>
                            <td width="80"><span>状态</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="80"><span>起订数量</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="80"><span>采购价格</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="90"><span>预计到货天数</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="80"><span>起重物流费</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td><span>采购链接</span></td>
                            <td><span>备注</span><button type="button" class="layui-btn layui-btn-xs layui-btn-warm pur-all">应用所有</button></td>
                            <td width="130">操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        {if isset($product)}
                        {foreach $product.purchase as $pur}
                            <tr>
                                <td>
                                    <select name="producer.producer_id[]" lay-search>
                                        <option value="">请选择</option>
                                        {foreach $producer as $p}
                                        <option {if $pur.producer_id==$p.producer_id}selected{/if} value="{$p.producer_id}">{$p.name}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td>
                                    <select name="producer.type[]">
                                        {foreach $producer_type as $k=>$t}
                                        <option {if $pur->getData('type')==$k}selected{/if} value="{$k}">{$t}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td><input type="checkbox" lay-filter="is-default" class="producer-is-default" name="producer.is_default[]" {if $pur->getData('is_default')==1}checked{/if} lay-skin="switch" value="1" lay-text="是|否"></td>
                                <td><input type="checkbox" name="producer.status[]" lay-skin="switch" value="1" {if $pur->getData('status')==1}checked{/if} lay-text="可用|禁用"></td>
                                <td><input type="text" class="layui-input" value="{$pur.min_qty}" name="producer.min_qty[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" value="{$pur.price}" name="producer.price[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" value="{$pur.predict_day}" name="producer.predict_day[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" value="{$pur.start_weight_price}" name="producer.start_weight_price[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" value="{$pur.url}" name="producer.url[]" lay-verify="emptyUrl"></td>
                                <td><input type="text" class="layui-input" value="{$pur.remark}" name="producer.remark[]"></td>
                                <td>
                                    <button type="button" class="layui-btn layui-btn-xs product-purchase-add">添加</button>
                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-purchase-clear">清空</button>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-purchase-del">删除</button>
                                </td>
                                <input type="hidden" value="{$pur.pp_id}" name="producer.pp_id[]" />
                            </tr>
                        {/foreach}
                        {else}
                            <tr>
                                <td>
                                    <select name="producer.producer_id[]" lay-search>
                                        <option value="">请选择</option>
                                        {foreach $producer as $p}
                                        <option value="{$p.producer_id}">{$p.name}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td>
                                    <select name="producer.type[]">
                                        {foreach $producer_type as $k=>$t}
                                        <option value="{$k}">{$t}</option>
                                        {/foreach}
                                    </select>
                                </td>
                                <td><input type="checkbox" lay-filter="is-default" class="producer-is-default" name="producer.is_default[]" lay-skin="switch" value="1" lay-text="是|否"></td>
                                <td><input type="checkbox" name="producer.status[]" lay-skin="switch" value="1" checked lay-text="可用|禁用"></td>
                                <td><input type="text" class="layui-input" name="producer.min_qty[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" name="producer.price[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" name="producer.predict_day[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" name="producer.start_weight_price[]" lay-verify="emptyNumber"></td>
                                <td><input type="text" class="layui-input" name="producer.url[]" lay-verify="emptyUrl"></td>
                                <td><input type="text" class="layui-input" name="producer.remark[]"></td>
                                <td>
                                    <button type="button" class="layui-btn layui-btn-xs product-purchase-add">添加</button>
                                    <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-purchase-clear">清空</button>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-purchase-del">删除</button>
                                </td>
                            </tr>
                        {/if}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-bottom: 50px;">
            <div class="layui-col-xs11">
                <div style="text-align: center">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal close-data">关闭</button>
                    <button type="button" lay-submit lay-filter="product-form" class="layui-btn layui-btn-sm layui-btn-normal save-data">保存</button>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="attr-select-template">
    <div class="layui-col-md12" id="attr-template">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form-item channel">
                    <label class="layui-form-label">全部</label>
                    <div class="layui-input-block">
                        <ul>
                            {%body}
                        </ul>
                    </div>
                </div>
                <div class="layui-form-item channel">
                    <label class="layui-form-label">全部</label>
                    <div class="layui-input-block">
                        <ul>
                            {%color}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="product-store-tr-template">
    <tr>
        <td>
            <img class="store-image" width="100px;" src="__PUBLIC__/img/no-photo.png">
            <input type="hidden" name="store.image_url[]" value="">
        </td>
        <td><input type="text" class="layui-input store-sku" name="store.sku[]" lay-verify="required" lay-reqText="SKU不能为空"></td>
        <td><input type="text" class="layui-input store-attr" name="store.attr[]"></td>
        <td><input type="text" class="layui-input store-color" name="store.color[]"></td>
        <td><input type="text" class="layui-input" name="store.length[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="store.width[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="store.height[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="store.weight[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="store.package_weight[]" lay-verify="emptyNumber"></td>
        {if !isset($product)}
        <td><input type="text" class="layui-input" name="stock.stock[]" lay-verify="emptyNumber"></td>
        {/if}
        <td><input type="text" class="layui-input" name="store.price[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="store.remark[]"></td>
        <td>
            <button type="button" class="layui-btn layui-btn-xs product-store-add">添加</button><br/>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-store-clear">清空</button><br/>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-store-del">删除</button>
        </td>
    </tr>
</script>
<script type="text/html" id="product-producer-tr-template">
    <tr>
        <td>
            <select name="producer.producer_id[]" lay-search>
                <option value="">请选择</option>
                {foreach $producer as $p}
                <option value="{$p.producer_id}">{$p.name}</option>
                {/foreach}
            </select>
        </td>
        <td>
            <select name="producer.type[]">
                {foreach $producer_type as $k=>$t}
                <option value="{$k}">{$t}</option>
                {/foreach}
            </select>
        </td>
        <td><input type="checkbox" lay-filter="is-default" class="producer-is-default" name="producer.is_default[]" lay-skin="switch" value="1" lay-text="是|否"></td>
        <td><input type="checkbox" name="producer.status[]" lay-skin="switch" value="1" checked lay-text="可用|禁用"></td>
        <td><input type="text" class="layui-input" name="producer.min_qty[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="producer.price[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="producer.predict_day[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="producer.start_weight_price[]" lay-verify="emptyNumber"></td>
        <td><input type="text" class="layui-input" name="producer.url[]" lay-verify="emptyUrl"></td>
        <td><input type="text" class="layui-input" name="producer.remark[]"></td>
        <td>
            <button type="button" class="layui-btn layui-btn-xs product-purchase-add">添加</button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-warm product-purchase-clear">清空</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs product-purchase-del">删除</button>
        </td>
    </tr>
</script>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/js/jquery.serializejson.min.js"></script>
<script type="text/javascript">
    layui.extend({
        inputTags: "inputTags"
    }).use("inputTags");
    layui.config({
        base: '__PUBLIC__/layui/plugins/'
    }).use('selectGroupTree');
    layui.use(['form', 'laydate', 'table', 'upload', 'layer', 'rate', 'longli', 'selectGroupTree', 'util', 'inputTags'], function()
    {
        var form = layui.form
            , layer = layui.layer
            , util = layui.util
            , upload = layui.upload
            , rate = layui.rate
            , selectGroupTree = layui.selectGroupTree;

        // 返回顶部
        util.fixbar({
            top:true
            , css: { right: 15, bottom: 35 }
            , bgcolor: '#2a96ff !important;display:block;'
            , showHeight:100
            , click: function (type) {
                if (type === 'top') {
                    $('.layui-body').animate({
                        scrollTop: 0
                    }, 200);
                }
            }
        });

        // 商品标签
        layui.inputTags.render({
            "elem": "#product-tag"
            ,"content": "{if isset($product)}{$product.tags}{/if}".split(",").filter(e=>e!='')
            ,"name":"product.tags"
        });

        // 提交表单
        form.on("submit(product-form)", function (data)
        {
            var $this = $(this);
            if($this.attr('disabled')) return false;
            $this.attr('disabled', 'disabled');
            layer.load(0, {shade: false});
            var json = $("#product-form").serializeJSON();
            layui.longli.postJson('{:url("/wms/product/save")}', json, function(response)
            {
                $this.removeAttr('disabled');
                layer.closeAll('loading');
                var icon = response.code == 1 ? 6 : 5;
                layer.msg(response.msg, {icon: icon, time: 1500});
                 if(response.code == 1)
                 {
                     parent.$(".search-btn").click();
                     parent.layer.closeAll();
                 }
            });
            return false;
        });

        // 关闭页面
        $(".close-data").click(function(){parent.layer.closeAll();});

        selectGroupTree.ajax({
            elem: 'product-category-id', //ID名称
            url: '{:url("/wms/category/getTree")}?cate_id=' + $("#product-category-id").val(), //数据请求地址
            type: 'get', //请求方式
            dataType: 'json', //数据类型
            data: null, //传递到服务端的数据
            placeholder: '' //占位符
        });

        // 上传图片
        upload.render({
            elem: '#product-upload-image'
            , url: '{:url("file/upload",["type"=>"image"])}'
            , multiple: true
            , accept: 'images' //普通文件
            , exts: 'jpg|jpeg|png' // 指定类型
            , field: "file"
            , before: function (obj)
            {
                layer.load(0, {shade: false});
            }
            ,done: function(response)
            {
                layer.closeAll('loading');
                var icon = 5;
                if(response.code == 1)
                {
                    icon = 6;
                    $("#product-images").val($("#product-images").val() + "," + response.data.src);
                    refreshImageList();
                }
                //layer.msg(response.msg, {icon: icon, time: 1500});
            }
        });
        // 上传网络图片
        $(".image-net").click(function()
        {
            layer.prompt({area: ['500px', '300px'],title: '一行一个链接', formType: 2, maxlength:10000}, function(text, index)
            {
                var images = text.replace("\r\n", "\n").split("\n").filter(e => {
                    return e.trim().substr(0, 4) == 'http';
                });
                layer.close(index);
                if(images.length < 1) return;
                $("#product-images").val($("#product-images").val() + "," + images.join(","));
                refreshImageList();
            });
        });
        // 上传本地图片
        $(".image-local").click(function()
        {
            $("#product-upload-image").click();
        });
        // 删除图片
        $(".product-image-box").on("click", ".imgage-cover-delete", function(event)
        {
            event.stopPropagation();
            var $this = $(this);
            layer.confirm('要删除图片吗？', {
                btn: ['确定','取消'] //按钮
            }, function(index){
                var src = $this.parent().find("img").attr("src")
                    , $imgInput = $("#product-image-url");
                if(src == $imgInput.val()) $imgInput.val('');
                refreshImageList($this.parent().index());
                layer.close(index);
            });
        });
        $(".product-image-box").on("click", "li:not(.no-photo)", function(event)
        {
            var $this = $(this)
                , $imgInput = $("#product-image-url");
            if($this.is(".active-li"))
            {
                $this.removeClass("active-li");
                $imgInput.val('');
            }
            else
            {
                $this.addClass("active-li").siblings().removeClass("active-li");
                $imgInput.val($this.find("img").attr("src"));
            }
        });
        // 刷新上传图片
        function refreshImageList(index)
        {
            var images = $("#product-images").val();
            if(images.length < 1) return;
            var ts = images.split(",").filter(e=>{return e!="";});
            images = layui.longli.uniqueArray(ts);
            if(index !== undefined && !isNaN(index))images.splice(index, 1);
            var html = "", coverImg = $("#product-image-url").val();
            for(let i in images)
            {
                let s = images[i] == coverImg ? "active-li" : '';
                html += `<li class="${s}"><img width="100px;" src="${images[i]}"><p></p><button type="button" class="layui-btn layui-btn-xs imgage-cover">封面</button><button type="button" class="layui-btn layui-btn-xs layui-btn-danger imgage-cover-delete">删除</button></li>`;
            }
            $(".product-image-box").html(html);
            $("#product-images").val(images.join(","));
            $(".product-image-box img").load(function()
            {
                var $this = $(this), obj = $this.get(0);
                $this.parent().find("p").text(obj.naturalWidth + " x " + obj.naturalHeight);
            });
            $(".product-image-box img").error(function()
            {
                var $this = $(this), src = $this.attr('src'), ret = [];
                $this.parent().addClass("error");
                layer.msg(`图片地址【<span style='color: red;'>${src}</span>】有误，请检查`, {icon: 5, time: 1500});
                //$("#product-images").val(ret.join(","));
            });
        }
        refreshImageList(); // 默认自动刷新一次

        rate.render({
            elem: '#product-rate'
            ,value: "{if isset($product)}{$product.hot?:5}{/if}"
            ,text: true
            ,setText: function(value)
            {
                var arrs = {
                    '1': '普通'
                    ,'2': '一般'
                    ,'3': '中等'
                    ,'4': '好'
                    ,'5': '极好'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
            , choose: function(value)
            {
                $("#product-hot").val(value);
            }
        });

        // 属性选择
        $(".product-attr-select").click(function()
        {
            var $btn = $(this), item = $btn.attr("item");
            layer.open({
                title: $btn.text(),
                area: ['80%', '45%'],
                yes: function(index, layero)
                {
                    var value = [], stype = {};
                    $("#attr-template a.active").each(function()
                    {
                        var $parent = $(this).parent()
                            , st = $parent.attr("stype")
                            , item = $parent.attr("item");
                        if(!stype[st]) stype[st] = [];
                        stype[st].push($(this).text().trim());
                        value.push(item);
                    });

                    var size = stype["size"] || []
                        , color = stype["color"] || []
                        , rows = [];
                    if(color.length > 0 && size.length > 0)
                    {
                        for(let i in color)
                        {
                            for(let j in size) rows.push({"size" : size[j], "color" : color[i]});
                        }
                    }
                    else if(color.length > 0)
                    {
                        for(let i in color) rows.push({"color" : color[i]});
                    }
                    else if(size.length > 0)
                    {
                        for(let i in size) rows.push({"size" : size[i]});
                    }
                    $(".product-attr-generate").data("data", value).data("rows", rows).click();
                    layer.close(index);
                },
                success: function(layero, index)
                {
                    var attr = JSON.parse($(".attr-" + item).text())
                        , sattr = ""
                        , data = $(".product-attr-generate").data("data") || [];
                    data = data.map(e=>{return parseInt(e);});
                    for(let i in attr)
                    {
                        let s = $.inArray(attr[i].spec_id, data) >= 0;
                        sattr += `<li stype="size" item="${attr[i].spec_id}"><a class="${s?'active':''}">${attr[i].name}</a></li>`;
                    }
                    var color = JSON.parse($(".attr-color").text()),
                        chtml = "";
                    for(let i in color)
                    {
                        let s = $.inArray(color[i].spec_id, data) >= 0;
                        chtml += `<li stype="color" item="${color[i].spec_id}"><a class="${s?'active':''}">${color[i].name}</a></li>`;
                    }
                    var temp = $("#attr-template").html().replace('{%body}', sattr).replace('{%color}', chtml);
                    $("#attr-template").html(temp);
                },
                content: $("#attr-select-template").html()
            });
        });

        // 生成变体
        $(".product-attr-generate").click(function()
        {
            var attrs = $(this).data("data") || []
                , rows = $(this).data("rows") || []
                , total = rows.length || 1;
            if(attrs.length < 1)
            {
                layer.msg("未选择属性");
                return;
            }
            var $table = $("#product-sotre-data tbody")
                , html = $("#product-store-tr-template").html();

            var s = "";
            total -= $table.find("tr").length;
            while(total > 0 && total--) s += html;
            if(s !== "")
            {
                $(s).appendTo($table);
                $table.find("tr").each(function(i, e)
                {
                    var $attr = $(e).find("input.store-attr"),
                        $color = $(e).find("input.store-color");
                    if(!$attr.val() && rows[i]["size"]) $attr.val(rows[i]["size"]);
                    if(!$color.val() && rows[i]["color"]) $color.val(rows[i]["color"]);
                });
            }
            // $(this).data("data", []);
            $("#product-attr-value").val(attrs.join(","));
        });

        // 批量赋值
        $(".layui-table thead button").click(function()
        {
            var $this = $(this);
            if(!($this.is(".store-all") || $this.is(".pur-all"))) return;
            var $table = $(this).is('.store-all')
                ? $("#product-sotre-data tbody")
                : $("#product-purchase-data tbody");
            var index = $this.parent().index()
                , base = $table.find("tr:first td:eq(" + index +") input:not([type=hidden])")
                , val = $.trim(base.val())
                , select = $table.find("tr:first td:eq(" + index +") select");
            if(val === '')
            {
                layer.msg($this.siblings().text() + " 第一行不能为空");
                return;
            }
            $table.find("tr").each(function()
            {
                var $input = $(this).find("td:eq(" + index +") input");
                if($input.is("[type=radio]") || $input.is("[type=checkbox]"))$input.prop("checked", base.prop("checked"));
                $input.val(val);

                $(this).find("td:eq(" + index +") select option[value=" + select.val() + "]").prop("selected", true);
            });
            form.render();
        });

        // 图片批量赋值
        $(".layui-table thead button.image").click(function()
        {
            var val = $(".store-image:first").parent().find("input").val();
            if(!val) return;
            $(".store-image").attr("src", val).siblings().val(val);

        });
        // 自动生成 sku
        $(".layui-table thead button.auto").click(function()
        {
            var $skus = $(".store-sku")
                , sku = $skus.val()
                , spu = $.trim($("#product-spu").val());
            if(spu.length < 1)
            {
                layer.msg("SPU必填", {icon: 5, time: 1500});
                return false;
            }
            $skus.each(function()
            {
                if(this.value) $skus = $skus.not(this);
            });
            if($skus.length < 1) return;
            layer.load(0, {shade: false});
            $.get('{:url("/wms/product/getskus")}', {num:$skus.length, sku: sku, spu: spu}).done(function(response)
            {
                layer.closeAll('loading');
                if(response.code != 1)
                {
                    layer.msg(response.msg, {icon: 5, time: 1500});
                    return;
                }
                $skus.each(function(i, e)
                {
                    $(e).val(response.data[i]);
                });
            });
        });

        // 默认采购
        form.on("switch(is-default)", function(data)
        {
            if(data.elem.checked)
            {
                $(".producer-is-default").prop('checked', false);
                data.elem.checked = true;
                form.render();
            }
        });

        form.on("checkbox(warehouse-all)", function(data)
        {
            $(".warehouse-id").prop("checked", this.checked);
            form.render("checkbox");
        });

        // 变体选择图片
        $("#product-sotre-data").on("click", ".store-image", function()
        {
            var $thisImg = $(this);
            layer.open({
                title: '选择变体图片',
                area: ['60%', '50%'],
                yes: function(index, layero)
                {
                    changeImg();
                    layer.close(index);
                },
                success: function(layero, index)
                {
                    var $imgSet = $(".store-image-select");
                    $imgSet.find(".no-photo").hide();
                    $imgSet.find(".error").hide();
                    $imgSet.find("li").removeClass("active-li").find("button").remove();
                    // 变体图片选择红框
                    $imgSet.find("li").on("click", function()
                    {
                        $(this).addClass("active-li").siblings().removeClass("active-li");
                    });
                    // 双击直接选择图片
                    $imgSet.find("li").on("dblclick", function()
                    {
                        changeImg();
                        layer.close(index);
                    });
                },
                content: '<ul class="store-image-select">' + $(".product-image-box").html() + '</ul>'
            });
            function changeImg()
            {
                var $img = $(".store-image-select li.active-li img");
                if($img.length < 1) return;
                $thisImg.attr("src", $img.attr("src"));
                $thisImg.parent().find("input").val($img.attr("src"));
            }
        });

        // 属性全选
        $("body").on('click', '#attr-template label', function()
        {
            var $Li = $(this).siblings("div").find("li");
            $Li.find("a.active").length > 0
                ? $Li.find("a").removeClass("active")
                : $Li.find("a").addClass("active");
        });

        // 单个属性选择
        $("body").on('click', '#attr-template li a', function()
        {
            var $this = $(this);
            $this.is(".active")
                ? $this.removeClass("active")
                : $this.addClass("active");
        });

        // 添加行
        $('body').on('click', '.product-store-add, .product-purchase-add', function()
        {
            var $table, html;
            if($(this).is('.product-store-add'))
            {
                $table = $("#product-sotre-data tbody");
                html = $("#product-store-tr-template").html();
            }
            else
            {
                $table = $("#product-purchase-data tbody");
                html = $("#product-producer-tr-template").html();
            }
            $(html).appendTo($table);
            form.render();
        });
        // 置空表单
        $('body').on('click', '.product-store-clear, .product-purchase-clear', function()
        {
            var $parnet = $(this).parentsUntil("tr").parent();
            $parnet.find("input[type!='hidden']").val('');
            $parnet.find("img").attr("src", "__PUBLIC__/img/no-photo.png");
        });
        // 删除行
        $('body').on('click', '.product-store-del, .product-purchase-del', function()
        {
            var $table = $(this).is('.product-store-del')
                ? $("#product-sotre-data tbody tr")
                : $("#product-purchase-data tbody tr");
            if($table.length === 1)
            {
                layer.msg('只有一条不允许删除。', {time : 2000});
            }
            else
             {
                //删除当前按钮所在的tr
                $(this).closest('tr').remove();
            }
        });
    });
</script>
{/block}
